<template>
  <Echarts :options="config" ref="echarts" @click="handleClick"></Echarts>
</template>

<script>
  import Echarts from "vue-echarts";
  import extend from "extend";

  export default {
    components: {
      Echarts
    },
    props: {
      options: {
        type: Object,
        default () {
          return {};
        }
      }
    },
    data () {
      return {
        config: null
      }
    },
    mounted () {
      const defaultOption = {
        title: {
          text: "title",
          left: 18,
          top: 20,
          textStyle: {
            color: "#4e5358"
          }
        },
        tooltip: {trigger: "axis", axisPointer: {animation: false}},
        toolbox: {left: "right"},
        grid: {
          top: "80",
          left: "24",
          right: "30",
          bottom: "15",
          containLabel: true
        },
        xAxis: {
          data: [],
          splitLine: {
            show: true,
            lineStyle: {
              type: "dotted",
              color: "#e3e9ed"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#aab1c7"
            }
          }
        },
        yAxis: {
          min: "dataMin",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dotted",
              color: "#e3e9ed"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#aab1c7"
            }
          }
        },
        series: [
          {
            name: "title",
            type: "line",
            data: []
          }
        ]
      };

      this.getData(defaultOption);
    },
    methods: {
      getData (defaultOption) {
        if (this.options.url) {
          this.$.ajax({
            url: this.options.url,
            success: (data) => {
              this.options.setData(data);
              this.config = extend(true, defaultOption, this.options);
            }
          })
        }
      },
      handleClick (event) {
        this.$emit("click", event);
      },
      mergeOptions (data) {
        this.$refs.echarts.mergeOptions(data);
      }
    }
  }
</script>
